<template>
  <a-drawer
    width="65%"
    placement="right"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
    :title="title"
    class="form-drawer form-card"
  >
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      class="form-model"
    >
      <a-form-model-item label="店铺名称：" prop="name">
        <a-input v-model="form.name" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="详细地址" class="is-required">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-model-item prop="provinceCode">
              <cascaderSelect
                :province-code.sync="form.provinceCode"
                :city-code.sync="form.cityCode"
                :district-code.sync="form.districtCode"
                :names.sync="cascaderNames"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item prop="address">
              <a-input v-model="form.address" placeholder="请输入" allow-clear></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model-item>
      <a-form-model-item label="所属品牌" prop="contact">
        <BrandSelect v-model="form.brandCode" />
      </a-form-model-item>
      <a-form-model-item label="联系人" prop="contact">
        <a-input v-model="form.contact" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="联系电话" prop="contactPhone">
        <a-input v-model="form.contactPhone" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="ERP店铺编码" prop="erpStoreCode">
        <a-input v-model="form.erpStoreCode" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 18, offset: 4 }">
        <a-button @click="onClose"> 取消 </a-button>
        <a-button type="primary" :loading="submitLoading" @click="onSubmit"> 确认 </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-drawer>
</template>

<script>
import cascaderSelect from '@/myComponents/cascader-select.vue'
import BrandSelect from '@/myComponents/brand-select.vue'
import { storeAddOrEdit, getStoreInfo } from '@/api/subject'
export default {
  name: '',
  components: { cascaderSelect, BrandSelect },
  data() {
    return {
      visible: false,
      form: {
        cascaderArr: []
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      rules: {
        provinceCode: [{ required: true, message: '请选择省市区' }],
        address: [{ required: true, message: '详细地址不能为空' }],
        name: [{ required: true, message: '店铺名称不能为空' }],
        contact: [{ required: true, message: '联系人不能为空' }],
        contactPhone: [
          { required: true, message: '联系电话不能为空' },
          { message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }
        ],
        desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }]
      },
      title: '创建店铺',
      submitLoading: false,
      cascaderNames: []
    }
  },
  methods: {
    addOther() {
      let verify = true

      this.otherSource.push({})
    },
    delHandler(record) {
      console.log(record, 'delHandler')
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let [provinceName, cityName, districtName] = this.cascaderNames
          this.submitLoading = true
          storeAddOrEdit({ ...this.form, provinceName, cityName, districtName })
            .then((resp) => {
              this.$notification['success']({
                message: '提示',
                description: `${this.form.id ? '编辑' : '新增'}成功`
              })
              this.onClose()
              this.submitLoading = false
              this.$emit('on-submit')
            })
            .catch(() => {
              this.submitLoading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.form = {}
      this.$refs.ruleForm.resetFields()
    },
    afterVisibleChange(visible) {
      if (!visible) {
        this.form = {
          provinceCode: undefined,
          cityCode: undefined,
          districtCode: undefined
        }
        this.cascaderNames = []
      }
    },
    onClose() {
      this.visible = false
    },
    open(record) {
      if (record.id) {
        getStoreInfo(record.id).then((res) => {
          res.data.cascaderArr = [res.data.provinceCode, res.data.cityCode, res.data.districtCode]
          this.form = res.data
          this.visible = true
        })
        this.title = '编辑店铺'
      } else {
        this.title = '创建店铺'
        this.visible = true
        setTimeout(() => {
          this.resetForm()
        }, 100);
      }
    }
  }
}
</script>

<style scoped lang="less">
.mb-none {
  margin-bottom: 0;
}
.form-drawer {
  .form-model {
    height: calc(100vh - 138px);
  }
}
</style>
